<template>
  <div>
    <el-card class="margin30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>{{ $route.query.id ?'编辑':'新增' }}文章</span>
      </div>
      <el-form ref="form" :rules="rules" :model="formData" label-width="130px" size="mini">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="作者" prop="author">
              <el-input v-model="formData.author" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="标题" prop="title">
              <el-input v-model="formData.title" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="是否显示">
              <el-switch v-model="formData.isShow" />

            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="15" :offset="0">
            <el-form-item label="摘要">
              <el-input v-model="formData.summary" type="textarea" placeholder="" />

            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="15" :offset="0">
            <el-form-item label="图片上传">
              <el-upload
                action="/lejuAdmin/material/uploadFileOss"
                :headers="headers"
                :show-file-list="false"
                :on-success="getUploadImg"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <img v-if="formData.coverImg" style="display:block;width:200px;height:200px;" :src="formData.coverImg" alt="">
              </el-upload>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="切换富文本类型">
              <!-- <Tinymce v-model="formData.content1" :height="300" /> -->
              <mavon-editor ref="md" v-model="formData.content1" @change="getRender" @imgAdd="imgAdd" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $route.query.id ? '编辑':'新增' }}</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
import {
  getToken
} from '@/utils/myAuth.js'
import Tinymce from '@/components/Tinymce/index'
import {
  uploadFileOss,
  addArticle,
  productArticle,
  updateArticle
} from '@/api/contentManage/articleList/addAricle'
export default {
  components: {
    Tinymce
  },
  data() {
    var validateTitle = (rule, value, callback) => {
      console.log('表单数据', value)
      if (value.length < 2 || value.length > 5) {
        callback(new Error('标题长度在2-5之间'))
      }
      callback()
      // if (value === '') {
      //   callback(new Error('请输入密码'));
      // } else {
      //   if (this.ruleForm.checkPass !== '') {
      //     this.$refs.ruleForm.validateField('checkPass');
      //   }
      //   callback();
      // }
    }
    return {
      headers: {
        'token': getToken()
      },
      rules: {
        author: [
          { required: true, message: '请输入作者姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '姓名长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        title: [
          {
            required: true, message: '请输入标题', trigger: 'blur'
          },
          { validator: validateTitle, trigger: 'change' }
        ]

      },
      formData: {
        'author': '',
        'collectCount': '',
        'content1': '',
        'content2': '',
        'coverImg': '',
        'createTime': '',
        'editorType': 1,
        'id': '',
        'isShow': '',
        'modifyTime': '',
        'summary': '',
        'title': '',
        'viewCount': '',
        'zanCount': ''
      }
    }
  },
  computed: {

  },
  created() {
    if (this.$route.query.id) {
      productArticle(this.$route.query.id)
        .then(res => {
          console.log(res)
          res.data.productArticle.isShow = !!res.data.productArticle.isShow
          this.formData = res.data.productArticle
        })
    }
  },
  mounted() {

  },
  methods: {
    imgAdd(pos, $file) {
      const formData = new FormData()
      formData.append('file', $file)
      uploadFileOss(formData)
        .then(rse => {
          // console.log(rse)
          // success(rse.data.fileUrl)
          // progress(100)
          this.$refs.md.$img2Url(pos, rse.data.fileUrl)
        })
    },
    getRender(val, val1) {
      this.formData.content2 = val1
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          var newObj = JSON.parse(JSON.stringify(this.formData))
          newObj.isShow = newObj.isShow ? 1 : 0
          if (this.$route.query.id) {
            updateArticle(newObj)
            return
          }
          addArticle(newObj)
            .then(res => {
              console.log(res)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getUploadImg(val) {
      console.log(val)
      this.formData.coverImg = val.data.fileUrl
    }
  }
}
</script>

<style scoped lang="scss">

</style>
